<template>
    <a-modal
        v-model:visible="visible"
        title="图标选择"
        :mask-closable="false"
        :width="800"
        :destroy-on-close="true"
        :footer="null"
        @cancel="onCancel"
    >
        <a-tabs
            v-model="activeKey"
            position="left"
            size="small"
            @change="paneChange"
        >
            <a-tab-pane
                v-for="item in iconData"
                :key="item.key"
                :title="item.name"
            >
                <div
                    v-if="item.iconItem.length > 1"
                    class="xn-icon-select-radio"
                >
                    <a-radio-group
                        v-model="iconItemDefault"
                        type="button"
                        @change="radioGroupChange"
                    >
                        <a-radio
                            v-for="iconItem in item.iconItem"
                            :key="iconItem.key"
                            :value="iconItem.key"
                            >{{ iconItem.name }}</a-radio
                        >
                    </a-radio-group>
                </div>

                <div v-for="iconItemIns in item.iconItem" :key="iconItemIns">
                    <div
                        v-if="iconItemIns.key === iconItemDefault"
                        class="xn-icon-select-list"
                    >
                        <ul>
                            <li
                                v-for="icon in iconItemIns.item"
                                :key="icon"
                                :class="icon === modelValue ? 'active' : ''"
                                @click="selectIcon(icon)"
                            >
                                <component :is="icon" class="xn-icons" />
                            </li>
                        </ul>
                    </div>
                </div>
            </a-tab-pane>
        </a-tabs>
    </a-modal>
</template>

<script lang="ts" setup>
    import config from '@/config/iconselect';

    import { ref } from 'vue';

    const iconSelector = ref();
    const visible = ref(false);
    const iconData = ref([]);
    const modelValue = ref('');
    const activeKey = ref('default');
    const iconItemDefault = ref('default');
    const emit = defineEmits(['iconCallBack']);

    iconData.value.push(...config.icons);

    // 默认配置
    function defaultSetting(value: any) {
        if (value) {
            modelValue.value = value;
            // 判断展开哪个
            if (
                value.indexOf('-outlined') > -1 ||
                value.indexOf('-filled') > -1 ||
                value.indexOf('-two-tone') > -1
            ) {
                activeKey.value = 'default';
                if (value.indexOf('-two-tone') > -1) {
                    iconItemDefault.value = 'twotone';
                } else if (value.indexOf('-filled') > -1) {
                    iconItemDefault.value = 'filled';
                }
            } else if (value.indexOf('-extend') > -1) {
                // 扩展列表
                activeKey.value = 'extend';
                // 如扩展其他顶部单选的情况，默认选中在这里配置,同时这里需要做判断
                // this.iconItemDefault = '您的json中配置的'
            }
        }
    }

    // 打开
    function showIconModal(value: any) {
        visible.value = true;
        defaultSetting(value);
    }
    // 切换标签页，如果是切换到了没用额外的标签页的地方，我们将其置为默认
    function paneChange(e) {
        if (e.indexOf('default') === -1) {
            iconItemDefault.value = 'default';
        }
    }
    // 切换icon风格
    function radioGroupChange(e) {
        iconItemDefault.value = e;
    }
    // 选择图标后关闭并返回
    function selectIcon(value: any) {
        const defaultValue = value;
        visible.value = false;
        // eslint-disable-next-line vue/require-explicit-emits
        emit('iconCallBack', defaultValue);
    }
    function onCancel() {
        visible.value = false;
    }

    defineExpose({
        showIconModal,
    });
</script>

<style lang="less" scoped>
    .xn-icon-select-radio {
        padding-bottom: 10px;
        padding-left: 5px;
    }

    .xn-icons {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 26px;
    }

    .xn-icon-select-list {
        height: 360px;
        overflow: auto;
    }

    .xn-icon-select-list ul {
        li {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 60px;
            margin: 5px;
            padding: 18px;
            vertical-align: top;
            border-radius: 2px;
            box-shadow: 0 0 0 1px #f0f0f0;
            transition: all 0.1s;

            &:hover,
            &.active {
                color: #fff;
                background-color: #1890ff;
                cursor: pointer;
            }
        }
    }
</style>
